<%@page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@include file="/common/session.jsp" %>
<c:set var="marketId" value="${param.marketId}"/>
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no, width=device-width">
    <LINK type="text/css" rel="stylesheet" href="${ctx}/css/default.css"/>
    <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="${ctx}/dwr/engine.js"></script>
    <script type="text/javascript" src="${ctx}/dwr/util.js"></script>
    <script type='text/javascript' src='${ctx}/dwr/interface/MarketRpcService.js'></script>
    <script type='text/javascript' src='${ctx}/dwr/interface/ProvinceRpcService.js'></script>
    <script type='text/javascript' src='${ctx}/dwr/interface/CityRpcService.js'></script>
    <script type="text/javascript" src="${ctx}/js/loading.js"></script>
    <style type="text/css">
        #preview{width:260px;height:190px;border:1px solid #cfdfe3;overflow:hidden;}
        #imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}
    </style>
    <script type="text/javascript">
        //图片上传预览    IE是用了滤镜。
        function previewImage(file)
        {
            var MAXWIDTH  = 260;
            var MAXHEIGHT = 180;
            var div = document.getElementById('preview');
            if (file.files && file.files[0])
            {
                div.innerHTML ='<img id=imghead>';
                var img = document.getElementById('imghead');
                img.onload = function(){
                    var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
                    img.width  =  rect.width;
                    img.height =  rect.height;
                    //                 img.style.marginLeft = rect.left+'px';
                    img.style.marginTop = rect.top+'px';
                }
                var reader = new FileReader();
                reader.onload = function(evt){img.src = evt.target.result;}
                reader.readAsDataURL(file.files[0]);
            }
            else //兼容IE
            {
                var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
                file.select();
                var src = document.selection.createRange().text;
                div.innerHTML = '<img id=imghead>';
                var img = document.getElementById('imghead');
                img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
                var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
                status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
                div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
            }
        }
        function clacImgZoomParam( maxWidth, maxHeight, width, height ){
            var param = {top:0, left:0, width:width, height:height};
            if( width>maxWidth || height>maxHeight )
            {
                rateWidth = width / maxWidth;
                rateHeight = height / maxHeight;

                if( rateWidth > rateHeight )
                {
                    param.width =  maxWidth;
                    param.height = Math.round(height / rateWidth);
                }else
                {
                    param.width = Math.round(width / rateHeight);
                    param.height = maxHeight;
                }
            }
            param.left = Math.round((maxWidth - param.width) / 2);
            param.top = Math.round((maxHeight - param.height) / 2);
            return param;
        }
    </script>
</head>
<body>
<form id="marketForm" name="marketForm" enctype="multipart/form-data"  method="post">
	<center>
        <input type="hidden" id="marketId" name="marketId" value="${marketId}">
    	<input type="hidden" id="marketParentId" name="marketParentId" value="1">
        <input type="hidden" id="marketLogo" name="marketLogo" maxlength="100" required>
        <table width="100%" cellpadding="5" cellspacing="5">
            <tr>
                <td>
                    所属省:
                </td>
                <td>
                    <select id="provinceId" name="provinceId" onchange="getCityList()">
        			</select>
                </td>
                <td>
                    所属市:
                </td>
                <td>
                    <select id="cityId" name="cityId">
       				</select>
                </td>
            </tr>
            <tr>
                <td>
                   市场名称:
                </td>
                <td>
                    <input type="text" placeholder="市场名称(必填)" id="marketName" name="marketName" maxlength="20" required/>
                </td>
                <td>
                    市场简称:
                </td>
                <td>
                    <input type="text" placeholder="市场简称(必填)" id="marketShortName" name="marketShortName" maxlength="20" required/>
                </td>
            </tr>
            <tr>
                <td>
                    市场电话:
                </td>
                <td>
                    <input type="tel" placeholder="市场电话" id="marketMobile" name="marketMobile" maxlength="11" />
                </td>
            </tr>
            <tr>
                <td>
                    上传Logo:
                </td>
                <td>
                    <div id="preview">
                        <img id="imghead" width=100% height=auto border=0 >
                    </div>
                    <input type="file" onchange="previewImage(this)"  accept="image/jpg,image/jpeg,image/png"  name="file" />
                </td>
            </tr>
            <tr>
                <td style="border-bottom: 1px solid #e1ecf5" colspan="6">
                </td>
            </tr>
            <tr>
                <td colspan="6" align="center">
                    <button type="button" onclick="insertOrUpdateMarket()">保存</button>
                    <button type="button" onclick="callbackMarket()">返回</button>
                </td>
            </tr>
        </table>
    </center>
</form>
</body>
</html>

<script>
    var province = new Province();
    ProvinceRpcService.selectProvinceList(province, callbackSelectProvinceList);

    function callbackSelectProvinceList(list) {
        dwr.util.addOptions("provinceId", list, "provinceId", "provinceName");
        if ("${marketId}".length > 0) {
            selectMarket();
        } else {
            getCityList();
        }
    }

    function getCityList(){
        var city = new City();
        city.provinceId = dwr.util.getValue("provinceId");
        CityRpcService.selectCityList(city, callbackSelectCityList);
    }

    function  callbackSelectCityList(list){
        dwr.util.removeAllOptions("cityId");
        dwr.util.addOptions("cityId", list, "cityId", "cityName");
        if(cityId) {
            dwr.util.setValue("cityId", cityId);
        }
    }

    function selectMarket() {
        var market = new Market();
        market.marketId = "${marketId}";
        MarketRpcService.selectMarketList(market, callbackSelectMarketList);
    }

    var cityId;
    function callbackSelectMarketList(list) {
        var market = list[0]
        dwr.util.setValues(market);
        getCityList();
        cityId = market.cityId;
        //图片回显
        $('#imghead').attr("src","${fdfsPath}"+market.marketLogo);
    }


    function insertOrUpdateMarket() {

        var marketName = document.getElementById("marketName").value;
        if (marketName == null || marketName == '') {
            alert("请输入市场名称");
            return false;
        }

        var marketShortName = document.getElementById("marketShortName").value;
        if (marketShortName == null || marketShortName == '') {
            alert("请输入市场简称");
            return false;
        }

        var formData = new FormData($( "#marketForm" )[0]);
        $.ajax({
            url: '${ctx}/controller/insertOrUpdateMarket' ,
            type: 'POST',
            data: formData,
            async: true,
            // 下面三个参数要指定，如果不指定，会报一个JQuery的错误
            cache: false,
            contentType: false,
            processData: false,
            dataType: "json",
            success: function (returndata) {
                if(returndata.code == 1){
                    setTimeout('alert(returndata.msg)',1000);
                    location = "${ctx}/market/market_list.jsp";
                }else{
                    alert(returndata.msg);
                }
            },
        });

    }

    function callbackMarket(){
        location = "${ctx}/market/market_list.jsp";
    }

</script>
